<!DOCTYPE html>
<html>
<head>
	<title>推文图片</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/book.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="__ROOT__/Apps/WebApp/View/default/css/tipdisapply.css">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/small_page.css" type="text/css">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/agent/GeneralizedArticle.css" type="text/css">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/agent/essayimg.css" type="text/css">
</head>
<body class="">
<div class="zhao">
	<div class="zhezhao">
		<div class="five">
			<div class="yibook"><img src="__ROOT__/Apps/WebApp/View/default/images/my_bookshelf_new_book_icon_nor.png" style="width:100%;height:100%;"><a style="display:inline-block;width:1.866667rem;height:0.426667rem;font-size:0.32rem;color:#fff;position:absolute;left:-0.133333rem;bottom:-0.5rem;">新建忆书</a></div>
			<div class="weibo" onclick="wbbook()"><img src="__ROOT__/Apps/WebApp/View/default/images/new_book_weibo_btn_nor.png" style="width:100%;height:100%;"></div>
			<div class="weixin" onclick="wxbook()"><img src="__ROOT__/Apps/WebApp/View/default/images/new_book_wechat_btn_nor.png" style="width:100%;height:100%;"></div>
			<!-- <div class="qq" onclick="qqbook()"><img src="__ROOT__/Apps/WebApp/View/default/images/new_book_qq_btn_nor.png" style="width:100%;height:100%;"></div> -->
			<div class="photo" onclick="phbook()"><img src="__ROOT__/Apps/WebApp/View/default/images/new_book_photo_btn_nor.png" style="width:100%;height:100%;"></div>
		</div>
	</div>
</div>
<div class="Largegraph">
	<div class="Largegraph-div" >
		<img src="" alt="" class="my-big"/>
  </div>
    
</div>
 <div class="article">
  	<div class="title">
  		<p>图片</p>
  		<span>打开图片长按保存到相册</span>
  	</div>
      <div class="essayimg">
      	  <div class="essayimg-div">
      	  	<img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9043.jpg" 
      	  		alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9043.jpg" class="iiii" />
      	  </div>
      	  <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9046.jpg" 
      	  	alt=""data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9046.jpg"  class="iiii" />
      	  </div>
      	 <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9047.jpg" 
      	  	alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9047.jpg"  class="iiii"/>
      	  </div>
      	 <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9048.jpg" 
      	  	alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9048.jpg"  class="iiii"/>
      	  </div>
      	 <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9049.jpg" 
      	  	alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/DSC_9049.jpg"  class="iiii"/>
      	  </div>
      	  <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2816.jpg"
      	  	 alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2816.jpg" class="iiii" />
      	  </div>
      	  <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2840.jpg" 
      	  	alt=""data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2840.jpg"  class="iiii" />
      	  </div>
      	  <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMGL0026.jpg" 
      	  	alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMGL0026.jpg"  class="iiii"/>
      	  </div>
      	  <div class="essayimg-div"> 
      	  <img src="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2841.jpg" 
      	  	alt="" data-target="__ROOT__/Apps/WebApp/View/default/images/agent/ok/IMG_2841.jpg"  class="iiii"/>
      	  </div>
      </div>
      <div class="page">
  		<div>当前第<span>4</span>页</div>
  		<div>
  			<a class="pageimga" href="{:U('WebApp/Agency/essayimg2')}">
  				<span class="pageimg">一</span>
  				上一页
  			</a>
  			<a class="pageimg1a" href="{:U('WebApp/Agency/essayimg4')}">
  				下一页<span class="pageimg1">一</span>
  			
  			</a>
  			
  		</div>
  	
  	</div> 
  	</div>
  		
	<footer>
		<div class="footer-center">
			<ul>
				<li><a onclick="back()"><img src="__ROOT__/Apps/WebApp/View/default/images/my_bookshelf_is_making_icon_nor.png" style="width:0.72rem;height:0.72rem;padding-top:0.133333rem;"><br>正在制作</a></li>
				<li><a><img src="__ROOT__/Apps/WebApp/View/default/images/my_bookshelf_new_book_icon_nor.png" style="width:1.066667rem;height:1.066667rem;margin-top:-0.213333rem;"><br>选择忆书</a></li>
				<li><a href="{:U('WebApp/Agency/tobecomeAgency')}" style="color: #5AC6B7;"><img src="__ROOT__/Apps/WebApp/View/default/images/my_bookshelf_me_sel.png" style="width:0.72rem;height:0.72rem;padding-top:0.133333rem;"><br>代理中心</a></li>
			</ul>
			<div class="radius"></div>
		</div>


	</footer>
	<include file="./Apps/WebApp/View/default/common_js.html" />
	<!--<include file="__ROOT__Apps/WebApp/View/default/common_footer.html" />-->
</body>
<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/ajax.js"></script>
<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/jisuan.js"></script>
<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/public.js"></script>
<script type="text/javascript">
	$(".essayimg-div").click(e=>{
		$('.Largegraph').css('display','block')
		var $tar=$(e.target)
		//if($tar.is(".my-small")){
		if($tar.hasClass("iiii")){
			//设置class为my-big的src为自己的target属性值
			$(".my-big").attr("src",$tar.data("target"));
		}
	});
	$('.Largegraph').click(e=>{
		$('.Largegraph').css('display','none')
	})
</script>
<script>
  
  $(function(){
 
    var i=0;
    var timer=null;
    for (var j = 0; j < $('.img li').length; j++) {  //创建圆点
      $('.num').append('<li></li>')
    }
    $('.num li').first().addClass('active'); //给第一个圆点添加样式 
  
    var firstimg=$('.img li').first().clone(); //复制第一张图片
    $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
    $('.des').width($('.img li').length*($('.img img').width()));
  
  
    // 下一个按钮
    $('.next').click(function(){
      i++;
      if (i==$('.img li').length) {
        i=1; //这里不是i=0
        $('.img').css({left:0}); //保证无缝轮播，设置left值
      };
      
      $('.img').stop().animate({left:-i*600},300);
      if (i==$('.img li').length-1) {   //设置小圆点指示
        $('.num li').eq(0).addClass('active').siblings().removeClass('active');
        $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
      }else{
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
      }
        
    })
  
    // 上一个按钮
    $('.prev').click(function(){
      i--;
      if (i==-1) {
        i=$('.img li').length-2;
        $('.img').css({left:-($('.img li').length-1)*600});
      }
      $('.img').stop().animate({left:-i*600},300);
      $('.num li').eq(i).addClass('active').siblings().removeClass('active');
      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
    })
  
    //设置按钮的显示和隐藏
//  $('.banner').hover(function(){
//    $('.btn').show();
//  },function(){
//    $('.btn').hide();
//  })
  
    //鼠标划入圆点
   $('.num li').mouseover(function(){
      var _index=$(this).index();
      $('.img').stop().animate({left:-_index*600},150);
      $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
      $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
    }) 
  })
</script>
</html>
